<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<div class="row full-width">
	<div class="columns">
		<div
			class="large-12 medium-14 small-16 large-centered medium-centered small-centered columns bg-light-blue padding-20px-bot">
			<div class="row">
				<!-- column Filter option -->
				<form:form id="form-filter" method="POST"
					modelAttribute="parametersFilter"
					action="${pageContext.request.contextPath}/flight/search.html">
					<div class="large-3 medium-3 columns">

						<!-- row Stops -->
						<div class="row">
							<div class="columns">
								<small><h5 class="blue">FILTER OPTIONS</h5></small>
							</div>
						</div>
						<!-- row Stop slider -->
						<div class="row">
							<div class="columns">
								<h4 class="blue">Stops</h4>
							</div>
						</div>
						<div class="row">
							<div class="columns">
								<span class="numSlider left" id="lblNumofStop">0 (direct)</span>
							</div>
						</div>
						<br>
						<div class="row">
							<div class="columns">
								<div class="columns">
									<div id="slider_numofstop"></div>
								</div>
							</div>
						</div>
						<!-- row Depart slider -->
						<div class="row">
							<div class="columns">
								<h4 class="blue">Depart</h4>
							</div>
						</div>
						<div class="row ">
							<div class="small-8 columns">
								<span class="numSlider left" id="lblDepartMin"></span> <input
									type="hidden" id="departMin" name="departMin"
									value="${paramFilter.departMin}" readonly>
							</div>
							<div class="small-8 columns">
								<span class="numSlider right" id="lblDepartMax"></span> <input
									type="hidden" id="departMax" name="departMax"
									value="${paramFilter.departMax}" readonly>
							</div>
						</div>
						<br>
						<div class="row">
							<div class="columns">
								<div class="columns">
									<div id="slider_depart"></div>
								</div>
							</div>
						</div>
						<!-- row Return slider -->
						<div id="divreturn">
							<div class="row">
								<div class="columns">
									<h4 class="blue">Return</h4>
								</div>
							</div>
							<div class="row">
								<div class="small-8 columns">
									<span class="numSlider left" id="lblReturnMin"></span> <input
										type="hidden" id="returnMin" name="returnMin"
										value="${paramFilter.returnMin}" readonly>
								</div>
								<div class="small-8 columns">
									<span class="numSlider right" id="lblReturnMax"></span> <input
										type="hidden" id="returnMax" name="returnMax"
										value="${paramFilter.returnMax}" readonly>
								</div>
							</div>
							<br>
							<div class="row">
								<div class="columns">
									<div class="columns">
										<div id="slider_return"></div>
									</div>
								</div>
							</div>
						</div>
						<!-- row Duration slider -->
						<div class="row">
							<div class="columns">
								<h4 class="blue">Duration</h4>
							</div>
						</div>
						<div class="row">
							<div class="small-8 columns">
								<span class="numSlider left" id="lblDurationMin"></span> <input
									type="hidden" id="durationMin" name="durationMin"
									value="${paramFilter.durationMin}" readonly>
							</div>
							<div class="small-8 columns">
								<span class="numSlider right" id="lblDurationMax"></span> <input
									type="hidden" id="durationMax" name="durationMax"
									value="${paramFilter.durationMax}" readonly>
							</div>
						</div>
						<br>
						<div class="row">
							<div class="columns">
								<div class="columns">
									<div id="slider_duration"></div>
								</div>
							</div>
						</div>
						<!-- row Flight Class -->
						<!-- 					<div class="row"> -->
						<!-- 						<div class="large-16 columns"> -->
						<!-- 							<h4>Class</h4> -->
						<!-- 							row Economy -->
						<!-- 							<input id="checkbox1" type="checkbox"> <label -->
						<!-- 								for="checkbox1">Economy</label> <br> -->
						<!-- 							row Business -->
						<!-- 							<input id="checkbox2" type="checkbox"> <label -->
						<!-- 								for="checkbox2">Business</label> -->
						<!-- 						</div> -->
						<!-- 					</div> -->


						<!-- row Airlines -->
						<div class="row">
							<div class="large-16 columns">
								<h4 class="blue">Airlines</h4>
								<div id="div-airlines-filter"></div>
							</div>
						</div>
						<input type="hidden" id="txttypeOfTrip" name="typeOfTrip"
							value="${params.typeOfTrip}" readonly> <input
							type="hidden" id="txtfromLocation" name="fromLocation"
							value="${params.fromLocation}" readonly> <input
							type="hidden" id="txttoLocation" name="toLocation"
							value="${params.toLocation}" readonly> <input
							type="hidden" id="txtoutBound" name="outBound"
							value="${params.outBound}" readonly> <input type="hidden"
							id="txtinBound" name="inBound" value="${params.inBound}" readonly>
						<input type="hidden" id="txtairlines" name="airlines"
							value="${params.airlines}" readonly> <input type="hidden"
							id="txtcabinClass" name="cabinClass" value="${params.cabinClass}"
							readonly> <input type="hidden" id="txtnumAdult"
							name="numAdult" value="${params.numAdult}" readonly> <input
							type="hidden" id="txtnumChild" name="numChild"
							value="${params.numChild}" readonly> <input type="hidden"
							id="txtnumInfant" name="numInfant" value="${params.numInfant}"
							readonly> <input type="hidden" id="txtnumStop"
							name="numStopFilter" value="${paramFilter.numStopFilter}" readonly> <input
							type="hidden" id="txtAirlines" name="airlinesFilter" readonly>
						<input type="hidden" id="txtAirlinesFilterMode"
							name="airlinesFilterMode" value="${params.airlinesFilterMode}" readonly>
							<input type="hidden" id="txtnumStopParam"
							name="numStop" value="${param.numStop}" readonly>

						<button type="submit"
							class="small getlatestresult button expand right loading_controller_group"
							id="both">
							<img src="<c:url value="/resources/img/ic_refresh.png"/>"
								class="margin-5px-right">Get Latest Result</img>
						</button>
					</div>
				</form:form>
				<!-- column results -->
				<div class="large-13 medium-13 columns">
					<!-- row No.Result Found and Sort by -->
					<div class="row">

						<!-- result found column -->
						<div class="large-13 medium-13 small-10 columns">
							<small><h5 class="blue">
									<b> <font color="red"><span id="span-result-found"></span><span
											id="flightLength"></span></font>
									</b><span id="spanResultFoundText">RESULTS FOUND</span>
								</h5></small>
						</div>
						<!-- sort by column -->
						<div class="large-3 medium-3 small-6 columns">
							<a class="margin-1" href="#" data-dropdown="hover1"
								data-options="is_hover:true"> <small><h5
										class="blue">
										Sort by: <font color="red" id="lbl_sortBy">Price</font>
									</h5></small>
							</a>

							<ul id="hover1" class="f-dropdown" data-dropdown-content>
								<li><a id="sort_airlines">Airlines</a></li>
								<li><a id="sort_numStop">Stops</a></li>
								<li><a id="sort_price">Price</a></li>
							</ul>
						</div>
					</div>

					<!-- rown n of flight -->
					<div id="lastPostsLoader">
						<!-- Ajax Generation -->
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
<div align="center">
	<div style="color: #06719f;" id="exitScroll">
		<img src="<c:url value="/resources/img/ic_scrolldown.png"/>">
		&nbsp;Scroll down to show more
	</div>
	<div style="color: #06719f;" id="noResult" hidden>
    	&nbsp;End of results
	</div>
</div>